import React, { Component } from 'react';
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
class LineChart extends Component {
    state = {

    }
    componentDidMount() {
        let lineChart = echarts.init(document.getElementById('line'));
        lineChart.setOption({
            color: ['#108CEE', '#F38900',],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    axis: 'x'
                }
            },
            legend: {
                show: true,
                orient: 'horizontal',
                data: ['资源共享', '资源申请'],
                textStyle: {
                    color: ['#F38900', '#108CEE'],
                    fontSize: 12
                },
                itemWidth: 8,
                itemHeight: 8,
                top: '5',
                right: '0'

            },
            xAxis: [
                {
                    type: 'category',
                    roam: false,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    data: ['销售部', '产品部', '项目部', '物流', '供应链', '环保'],
                    axisPointer: {
                        type: 'line'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#718ED3'
                        }
                    },
                    axisTick: {

                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    roam: false,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    name: '资源共享',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLine: {
                        lineStyle: {
                            color: '#718ED3'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#718ED3',
                            fontSize: 13
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                {
                    type: 'value',
                    name: '资源申请',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLine: {
                        lineStyle: {
                            color: '#C5696B'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#C5696B'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#C5696B',
                            fontSize: 13
                        }
                    },
                    splitLine: {
                        show: false
                    },
                }
            ],
            series: [
                {
                    name: '资源共享',
                    type: 'bar',
                    data: [12, 23, 26, 35, 56, 95]
                },
                {
                    name: '资源申请',
                    type: 'line',
                    data: [23, 45, 39, 84, 48, 14],
                },
            ]
        })
    }
    render() {
        return (
            <div id="line"></div>
        )
    }
}
export default LineChart;